<template>
	<view class="user">
		<!-- 	<image src="https://linbo.vip:8888/noAudio.png" mode="aspectFill"
			style="width: 60rpx;height:60rpx;position: absolute;top: 100rpx;left:50rpx" @click="noAudio"></image> -->

		<view class="container">
			<!-- <image :src="bgSrc" mode="aspectFill" class="bg"></image> -->
			<view class="bg" :style="{backgroundImage: 'url(' +bgSrc+ ')',
  'background-repeat':'no-repeat'}"></view>
			<!-- <u--image :src="bgSrc" :fade="true" mode="aspectFill" width="100vw" height="100vh" duration="1000">
			</u--image> -->
			<view class="avatar">
				<image style="width: 100%;height: 100%;" :src="avatarUrl" mode="aspectFill"></image>
			</view>
			<view class="title">你好，{{nickName}}</view>
			<image src='https://linbo.vip:8888/waves.gif' mode='scaleToFill' class='gif-wave'></image>
			<view class="content">
				<view class="card" @click="changeBgImg">更换背景</view>
				<view class="card" @click="forAuthor">给作者留言</view>
				<u-button
					customStyle="text-align: center;line-height: 110rpx;border:none;width: 80%;height: 110rpx;margin: 0 auto;margin-bottom: 30rpx;border-radius: 20rpx;font-size: 36rpx;color: #fff;box-shadow: 0 0 10rpx #333;backdrop-filter: blur(49px);-webkit-backdrop-filter: blur(49px);background-color: rgba(255, 255, 255, 0.1);"
					open-type="share">分享小程序</u-button>
				<view class="card" @click="aboutAuthor">关于作者</view>
				<u-modal :show="show" width="600rpx" title="林波  web前端开发工程师" @confirm="show=false">
					<view>
						<image src="https://linbo.vip:8888/me.png" mode="aspectFill"
							style="width: 120rpx;height: 120rpx;overflow: hidden;border-radius:50%;float:left;margin-right: 20rpx;">
						</image>
						<text
							style="padding-top: 20rpx;font-size: 32rpx;font-weight: blod;">精通HTML、CSS、JavaScript、TypeScript、Vue、Node、Nginx等单词拼写✌，熟练掌握面向谷歌、百度等搜索引擎编程能力🤣🤣🤣</text>
					</view>
				</u-modal>
			</view>
		</view>


	</view>
</template>

<script>
	import getInfo from '@/utils/getUserInfo.js'
	export default {
		data() {
			return {
				show: false,
				bgSrc: 'https://linbo.vip:8888/bg/bg6.png',
				bgIndex: 1,
				avatarUrl: '' || 'https://linbo.vip:8888/avatar.png',
				nickName: '' || '少年',
				innerAudioContext: null
			};
		},
		onTabItemTap(e) {
			if (e.text === '个人中心') getInfo(this, this.setData)
		},
		onShow() {
			this.src = this.$myData.avatarUrl
		},
		onLoad() {
			// this.bgSrc = `https://linbo.vip:8888/bg/bg${this.bgIndex}.png`
			// this.innerAudioContext = uni.createInnerAudioContext();
			// this.innerAudioContext.autoplay = true;
			// this.innerAudioContext.volume = 0.5
			// this.innerAudioContext.src = 'https://linbo.vip:8888/迪迦奥特曼.mp3';
			// this.innerAudioContext.onPlay(() => {
			// 	console.log('开始播放');
			// });
		},
		mounted() {
			this.src = this.$myData.avatarUrl
			this.nickName = this.$myData.nickName
		},
		methods: {
			changeBgImg() {
				this.bgIndex = Math.floor(Math.random() * 10) + 1
				this.bgSrc = `https://linbo.vip:8888/bg/bg${this.bgIndex}.png`
			},
			forAuthor() {
				const that = this
				uni.showModal({
					title: '你想对作者说什么?',
					content: '',
					showCancel: true,
					"editable": true,
					"confirmColor": '#57afd0',
					"placeholderText": '留言到后台',
					success: res => {
						console.log(res.content)
						if (!res.content) {
							return
						}
						uni.request({
							url: 'https://linbo.vip:8888/uniapp/message',
							method: 'post',
							data: {
								content: res.content,
								nickName: that.$myData.nickName
							},
							success(res) {
								if (res.data.code === 200) {
									uni.showToast({
										icon: 'success',
										title: '留言成功'
									})
								} else {
									uni.showToast({
										icon: 'error',
										title: '留言失败'
									})
								}
							}
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},
			shareProgram() {
				this.onShareAppMessage()
				// uni.share({
				// 	provider: "weixin",
				// 	scene: "WXSceneSession",
				// 	type: 5,
				// 	summary: "一起来体验MrBo开发的波仔小屋小程序吧！",
				// 	miniProgram: {
				// 		id: 'gh_e9e704f0117e',
				// 		path: 'path/hero/hero',
				// 		type: 0,

				// 	},
				// 	success: function(res) {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: function(err) {
				// 		console.log("fail:" + JSON.stringify(err));
				// 	}
				// });
			},
			aboutAuthor() {
				this.show = true
			},
			noAudio() {
				// this.innerAudioContext.destroy()
			},
			setData() {
				this.avatarUrl = this.$myData.avatarUrl
				this.nickName = this.$myData.nickName
			}
		}
	}
</script>

<style lang="less">
	.user {
		.container {
			// height: 600rpx;
			height: 100vh;
			width: 100%;
			position: relative;

			.bg {
				height: 100%;
				width: 100%;
				background-size: 100% 100%;
				-webkit-transition: all 1s linear;
				background-color: #fff;
			}

			.avatar {
				position: absolute;
				top: 200rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 150rpx;
				height: 150rpx;
				// background-color: #ccc;
				border-radius: 50%;
				overflow: hidden;
			}

			.title {
				position: absolute;
				width: 100%;
				text-align: center;
				top: 390rpx;
				font-size: 50rpx;
				color: beige;
			}

			.gif-wave {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				z-index: 99;
				mix-blend-mode: screen;
				height: 100rpx;
			}

			.content {
				position: absolute;
				top: 600rpx;
				width: 100%;

				.card {
					text-align: center;
					line-height: 110rpx;
					width: 80%;
					height: 110rpx;
					margin: 0 auto;
					margin-bottom: 30rpx;
					border-radius: 20rpx;
					font-size: 36rpx;
					color: #fff;
					box-shadow: 0 0 10rpx #333;
					backdrop-filter: blur(49px);
					background-color: rgba(255, 255, 255, 0.1);
					// &:active {
					// 	background-color: #e4e6ea;
					// }

					// &::after {
					// 	width: 100%;
					// 	height: 100%;
					// 	content: '';
					// 	font-size: 24px;
					// 	background-color: rgba(255, 255, 255, .2);
					// 	backdrop-filter: blur(15px);
					// 	box-shadow: 0 0 10px #333;
					// 	position: absolute;
					// 	// background-color: rgba(255, 255, 255, .2);
					// 	// filter: blur(100rpx);
					// }
				}
			}
		}

	}
</style>
s
